{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .card {
    background-color: #f5f9ff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 700px;
    margin: 0 auto;
  }

  .card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .form-container {
    margin-top: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
  }

  .form-group input[type="text"],
  .form-group input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 15px;
    transition: border 0.3s;
  }

  .form-group input:focus {
    outline: none;
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.4);
  }

  .card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .card-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 1 1 200px;
  }

  .card-option input[type="radio"] {
    display: none;
  }

  .card-box {
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: 0.3s ease;
    width: 100%;
  }

  .card-option input[type="radio"]:checked + .card-box {
    border-color: #3399ff;
    box-shadow: 0 0 10px rgba(51, 153, 255, 0.4);
  }

  .card-id {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .card-saving-name, .card-balance {
      font-size: 14px;
      color: #666;
    }

  .btn {
    background-color: #3399ff;
    color: #fff;
    padding: 10px 30px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .btn:hover {
    background-color: #267cd6;
  }
</style>

<div class="card">
  <h2><i class="bi bi-arrow-left-right"></i> 银行卡转账</h2>
  <p style="text-align: center; color: #555; margin-bottom: 20px;">
    请选择付款银行卡，输入收款卡号和转账金额：
  </p>

  {% if message %}
    <div style="margin-bottom: 15px; color: {{ 'green' if success else 'red' }}; text-align: center;">
      {{ message }}
    </div>
  {% endif %}

  <form method="POST" class="form-container">
    <div class="form-group">
      <label for="from_card">付款银行卡：</label>
      <div class="card-list">
        {% for card in cards %}
        <label class="card-option">
          <input type="radio" name="from_card" value="{{ card.cardID }}" required>
          <div class="card-box">
            <div class="card-id">{{ card.cardID }}</div>
            <div class="card-saving-name">存款类型：{{ card.savingName }}</div>
            <div class="card-balance">余额：{{ card.balance }} 元</div>
          </div>

        </label>

        {% endfor %}
      </div>
    </div>

    <div class="form-group">
      <label for="to_card">收款银行卡号：</label>
      <input type="text" name="to_card" id="to_card" placeholder="请输入收款卡号" required>
    </div>

    <div class="form-group">
      <label for="amount">转账金额：</label>
      <input type="number" name="amount" id="amount" step="0.01" min="0.01" placeholder="请输入转账金额" required>
    </div>

    <div style="display: flex; justify-content: center; gap: 20px; margin-top: 30px;">
      <button type="submit" class="btn">确认转账</button>
      <a href="{{ url_for('customer.balance') }}" class="btn" style="background-color: #6c757d;">返回</a>
    </div>


  </form>
</div>
{% endblock %}
